import Taro, { Component,useMemo } from '@tarojs/taro'
import { View, Button, Text,Image } from '@tarojs/components'
import {getBaoDan} from "../../mode/baodanCtr"
import {AtTabs, AtTabsPane} from "taro-ui";
import Recommend from "../../components/recommend/recommend";
import {NumToPx} from "../../utils/utils";
import taroUtils from "../../utils/taroUtils";
import {getHomeItemData} from "../../mode/homeCtr";
import appStore from "../../store/appStore";

class ExplosivePage extends Component{

  config = {
    navigationBarTitleText: '爆款'
  }
  constructor() {
    super();

    const tempData = appStore.appConfig.open >=1 ?[
        { title: '实时销量榜'  ,index:0,sale_type:1,curPage:1,list:[]},
        { title: '今日爆单榜' ,index:1,sale_type:2,curPage:1,list:[]},
        { title: '昨日爆单榜' ,index:2,sale_type:3,curPage:1,list:[]},
        { title: '今日热搜榜'  ,index:3,sale_type:4,curPage:1,list:[]},
      ]:[
      { title: '我推荐榜'  ,index:0,sale_type:1,curPage:1,list:[]},
    ]

    this.state = {
      current:0,
      searchScrollviewHeight:0,
      data:tempData
    }

  }
  componentDidMount () {

  }

  componentDidShow () {
    this.handleClick(0)
    // taroUtils.GetScrollViewSurplusContain(this,".sroView").then((h)=>{
    //   this.setState({
    //     searchScrollviewHeight:h+35
    //   })
    // })
  }


  /**
   * 更多
   * */
  ToLowerEvent=(ui,item)=>{

    getBaoDan(item).then(res=>{
      var temp = this.state.data
      const data = temp[item.index].list.concat(res.data)

      temp[item.index].list = data
      temp[item.index].curPage = res.pageIndex
      this.setState({
        data:temp
      },()=>{
        ui.RefData(true)
      })
    })
  }

  handleClick(value){

    this.setState({
      current:value,
    },()=>{
      if (this.state.data[value].list.length > 0)return;
      getBaoDan(this.state.data[value]).then(res=>{
        var temp = this.state.data
        temp[value].list = res.data
        temp[value].curPage = res.pageIndex
        this.setState({
          data:temp
        })
      })
    })
  }

  createView(item,h){
    return(<View>
      <Recommend   list={item.list} height={NumToPx(h)} ToLowerEvent={(t)=>{
        this.ToLowerEvent(t,item)
      }} />
    </View>)

  }

  render () {
    const  h = 750 //this.state.searchScrollviewHeight

    return (
      <View>
        <View className={'sroView'}>
          <AtTabs
            current={this.state.current}
            scroll
            tabList={this.state.data}
            onClick={this.handleClick.bind(this)}>
            <AtTabsPane current={this.state.current} index={0}>
              {this.createView(this.state.data[0],h)}
            </AtTabsPane>

            {
              appStore.appConfig.open >=1 ?(
                <View>
                  <AtTabsPane current={this.state.current} index={1}>
                    {this.createView(this.state.data[1],h)}
                  </AtTabsPane>
                  <AtTabsPane current={this.state.current} index={2}>
                    {this.createView(this.state.data[2],h)}
                  </AtTabsPane>
                  <AtTabsPane current={this.state.current} index={3}>
                    {this.createView(this.state.data[3],h)}
                  </AtTabsPane>
                </View>
              ):<View/>
            }


          </AtTabs>
        </View>
      </View>
    )
  }
}

export  default ExplosivePage
